<template>
	<div class="menu-list">
		<!-- <div class="block">
      <p>使用 render-content</p>
      <el-tree
        :data="data4"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent">
      </el-tree>
    </div> -->
		<div class="block">
			<!-- <p>使用 scoped slot</p> -->
			<div class="one-menuList">
				<p>添加一级目录</p>
				<el-button type="primary" size="small" icon="el-icon-plus" @click="operation('add',{id:0})">添加</el-button>
			</div>
			<el-tree :data="menuList" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false">
				<span class="custom-tree-node" slot-scope="{ node, data }">
					<span>{{ node.label }}</span>
					<span>
						<el-button type="text" size="mini" @click="() => operation('add',data)">
							添加
						</el-button>
						<el-button type="text" size="mini" @click="() => operation('modify', data)">
							修改
						</el-button>
						<el-button type="text" size="mini" @click="() => operation('del', data)">
							删除
						</el-button>
					</span>
				</span>
			</el-tree>
		</div>
		<Dialog @close="close" @confirm="confirm" :dialogISshow="dialogISshow" :title="title">
			<el-form label-position="left" label-width="120px" :model="fromData">
				<el-form-item label="页面名称(meta)">
					<el-input v-model="fromData.meta"></el-input>
				</el-form-item>
				<el-form-item label="组件名称(name)">
					<el-input v-model="fromData.name"></el-input>
				</el-form-item>
				<el-form-item label="组件">
					<el-input v-model="fromData.component"></el-input>
				</el-form-item>
				<el-form-item label="路由路径">
					<el-input v-model="fromData.path"></el-input>
				</el-form-item>
				<el-form-item label="重定向路由">
					<el-input v-model="fromData.redirect"></el-input>
				</el-form-item>
				<el-form-item label="角色权限(只可指定的角色访问)" v-if="submitType=='modify'">
					<el-select v-model="fromData.aroleid" :multiple="true" placeholder="所有人可见">
						<el-option v-for="item in roleTypeList" :key="item.value" :label="item.role_name" :value="String(item.aroleid)">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</Dialog>
	</div>

</template>
<script>
// import Dialog from './dialog';
import { mapActions } from 'vuex';
// let id = 1000;
export default {
	data() {
		return {
			menuList: [],
			dialogISshow: false,
			title: '',
			fromData: {
				name: 'userAdmin',
				component: 'system/user-admin/user-list',
				path: 'userAdmin',
				redirect: '',
				meta: '人员管理',
				aroleid: [],
			},
			roleTypeList: [],
			submitType: '',
		};
	},
	// components: {
	// 	Dialog,
	// },
	mounted() {
		this.init();
	},
	methods: {
		...mapActions('admin', ['addRouters']),
		init() {
			this.$http('/admin/getMenuList').then(res => {
				let list = res.data;
				this.fromDat(res.data);
				this.menuList = res.data;
			});
			this.getRoleType();
		},
		confirm(sign) {
			// this.dialogISshow = false;
			if (this.submitType === 'modify') {
				this.$http('/admin/MenuModify', this.fromData).then(res => {
					log.ok(res.msg);
					this.init();
					this.getMenuList();
				});
			} else {
				this.$http('/admin/menuAddMenu', this.fromData).then(res => {
					log.ok(res.msg);
					this.getMenuList();
					this.init();
				});
			}
			this.close();
		},
		operation(type, data) {
			this.submitType = type;
			if (type === 'add') {
				this.dialogISshow = true;
				this.fromData.parentid = data.id;
				this.title = '添加菜单';
			} else if (type === 'modify') {
				// this.fromData;
				this.fromData.id = data.id;
				data.roleType ? (this.fromData.aroleid = data.roleType) : (this.fromData.aroleid = []);
				console.log('%c gc_this.fromData.aroleid=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', this.fromData.aroleid);
				this.dialogISshow = true;
				Object.assign(this.fromData, {
					name: data.name,
					component: data.component,
					path: data.path,
					redirect: data.redirect ? data.redirect.name : '',
					meta: data.meta,
				});
				this.title = '编辑菜单';
			} else if (type === 'del') {
				this.$msgbox({
					title: '删除',
					message: '此操作将删除菜单，删除后不可恢复，是否删除！',
					showCancelButton: true,
				})
					.then(res => {
						this.$http('/admin/menuDelete', { id: data.id }).then(res => {
							log.ok(res.msg);
							this.getMenuList();
							this.init();
						});
					})
					.catch(err => {});
			}
		},
		getRoleType() {
			this.$http('/admin/roleTypeList', {
				isAll: 1,
			}).then(res => {
				this.roleTypeList = res.data.list;
				console.log('%c gc_this.roleTypeList=>: ', 'color: MidnightBlue; background: Aquamarine; font-size: 20px;', this.roleTypeList);
			});
		},
		// getDetail(id){

		// },
		close() {
			this.dialogISshow = false;
			for (let key in this.fromData) {
				this.fromData[key] = '';
			}
		},
		fromDat(data) {
			data.forEach(item => {
				if (item.children && item.children.length) {
					this.fromDat(item.children);
				}
				item.label = item.meta;
			});
		},
		renderContent(h, { node, data, store }) {
			// return (
			// <span class="custom-tree-node">
			//   <span>{node.label}</span>
			//   <span>
			//     <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
			//     <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
			//   </span>
			// </span>
			// )
		},
	},
};
</script>

<style lang="scss">
.menu-list {
	.one-menuList {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}
}
</style>

